<template>
  <div>
    <h2 style="font-size: 30px;font-weight: bold;">请假申请</h2>
    <table border style="width: 800px">
      <tr>
        <td style="text-align: right;">姓名：</td>
        <td style="height: 40px;">
          <input style="width: 400px;height: 35px;" v-model="form.userName" />
        </td>
      </tr>
      <tr>
        <td style="width: 150px;text-align: right;">部门：</td>
        <td style="height: 40px;">
          <select v-model="form.sectorid" style="width: 280px;height: 30px;">
            <option v-for="item in data" :key="item.value" :label="item.label" :value="item.value" />
          </select>
        </td>
      </tr>
      <tr>
        <td style="text-align: right;">请假类型：</td>
        <td><el-radio-group v-model="form.leaveType">
        <el-radio  value="事假" name="type">事假</el-radio>
        <el-radio  value="病假" name="type">病假</el-radio>
        <el-radio  value="婚假" name="type">婚假</el-radio>
        <el-radio  value="产假" name="type">产假</el-radio>
        <el-radio  value="工伤" name="type">工伤</el-radio>
        <el-radio  value="补休" name="type">补休</el-radio>
        <el-radio  value="其他" name="type">其他</el-radio>
      </el-radio-group></td>
      </tr>
      <tr>
        <td style="text-align: right;">请假时间：</td>
        <td style="width: 400px;height: 110px;">
          <el-date-picker v-model="add.startTime"
            type="datetime" placeholder="开始时间" format="YYYY/MM/DD HH:mm" 
            value-format="YYYY-MM-DD h:m:s a" />至
          <el-date-picker v-model="add.endTime"
            type="datetime" placeholder="结束时间" format="YYYY/MM/DD HH:mm"
            value-format="YYYY-MM-DD h:m:s a" @change="GetDate"/>&nbsp;<br><br>
          共计<el-input style="width: 50px;" v-model="GetDate[0]"/>天
          <el-input style="width: 50px;" v-model="GetDate[1]"/>时<br><br>

          报到时间：<el-date-picker v-model="form.reportedTime" type="datetime" 
           format="YYYY/MM/DD HH:mm"
            placeholder="报到时间" />
        </td>
      </tr>
      <tr>
        <td style="text-align: right;">请假事由：</td>
        <td style="width: 600px;height: 110px;">
          <el-input v-model="form.leaveReason" maxlength="140" style="width: 600px;height: 100px;"
          :autosize="{ minRows: 4, maxRows: 6 }" show-word-limit type="textarea" />
        </td>
      </tr>
      <tr>
        <td style="text-align: right;">部门领导：</td>
        <td style="height: 40px;" align="center">
          <span style="font-size: 20px;">{{ form.departmentHeader }}</span>
        </td>
      </tr>
      <tr style="width: 150px;height: 60px;">
        <td></td>
        <td style="text-align: center;">
           <el-button style="width: 150px;height: 40px;font-size: 20px;" type="primary"
           @click="Creat">提交</el-button>
        </td>
      </tr>
    </table>
  </div>
</template>

<script setup lang="ts">
import axios from 'axios';
import { computed, onMounted, reactive } from 'vue';

const Uid=localStorage.getItem("UserId")

const form = reactive({
  userName: '',
  sectorid:'1',
  leaveTime:'',
  reportedTime:'',
  departmentHeader:'',
  leaveReason:'',
  leaveType:'',
  totaWorkTime:''
})
// eslint-disable-next-line @typescript-eslint/no-explicit-any
const add:any=reactive({
  Days:'',
  Hours:'',
  startTime:'',
  endTime:''
})

// eslint-disable-next-line @typescript-eslint/no-explicit-any
const GetDate:any=computed(()=>{
  if(!add.startTime || !add.endTime){
    return 0;
  }

  const start=new Date(add.startTime)
  const end = new Date(add.endTime)
  const diffMs=end.getTime()-start.getTime()
  const Day=Math.floor(diffMs/(1000*60*60*8));
  const Hour=Math.floor(diffMs% (1000*60*60*8)/(1000*60*60));
  // eslint-disable-next-line vue/no-side-effects-in-computed-properties
  add.Days=Day;
  // eslint-disable-next-line vue/no-side-effects-in-computed-properties
  add.Hours=Hour;
  return [Day,Hour];
})

import { ElMessage } from 'element-plus'
import moment from 'moment';
import router from '@/router';
const Creat=()=>{
  form.reportedTime=moment(form.reportedTime).utcOffset(8).format('YYYY/MM/DD HH:mm')
  form.leaveTime=add.startTime+'-'+add.endTime
  form.totaWorkTime=(add.Days*24/3)+add.Hours
  console.log(form);
  axios.post(`Leave/LeaveAdd`,form).then((ret) => {
    console.log(ret.data)
    if(ret.data>0){
      ElMessage.success('添加成功')
      router.push('/ExcusedList')
      return
    }else{
      ElMessage.error('添加失败')
    }
  })
}
onMounted(()=>{
  GetName()
})
//反填姓名和部门
const GetName=()=>{
  axios.get('User/Backfill', {
    params: {
      userId:Uid
    }
  }).then((ret) => {
    console.log(ret.data)
    form.userName=ret.data.data.userName
    form.sectorid=ret.data.data.sectoriD
    //反填部门领导
    axios.get('Leave/Leading', {
      params: {
        sectorid:form.sectorid
      }
    }).then((ret) => {
      console.log(ret.data)
      form.departmentHeader=ret.data[0].userName
    })
  })
}

//部门
const data = [{
    value: '1',
    label: 'IT信息部',
  },
  {
    value: '2',
    label: '人力资源部',
  },
  {
    value: '3',
    label: '财务部',
  }]

</script>

<style scoped>

</style>